import React, { Component } from 'react';

class Child extends Component {

  state = {
    username: {
      value: '',
      onChange: e => this.setState(state => ({ username: { ...state.username, value: e.target.value } }))
    },
    password: {
      value: '',
      onChange: e => this.setState(state => ({ password: { ...state.password, value: e.target.value } }))
    },
  }

  login = () => console.log(this.state)

  render() {
    /* let obj1 = { a: { id: 1, name: 'aa' }, b: { id: 2, name: 'bb' } }
    console.log({ a: { ...obj1.a, id: 100 }, b: { ...obj1.b } }); */


    return (
      <div>
        {/* 受控组件,value受到state控制,state中的数据通过onchange来修改 */}
        <div>
          <input
            type="text"
            {...this.state.username}
          />
        </div>
        <div>
          <input
            type="text"
            {...this.state.password}
          />
        </div>
        <div>
          <button onClick={this.login}>登录用户</button>
        </div>
      </div>
    );
  }
}

export default Child;
